<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<link href="static/css/pill.css" rel="stylesheet" type="text/css"/>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<title></title>
		<script type="text/javascript" src="static/bootstrap/js/jquery-3.5.1.min.js"></script>
		<script src="static/bootstrap/js/bootstrap.min.js "></script>
		<style>
			/*.tip{width:500px; height:500px; position:absolute;top:20%; left:30%;background:#fcfdfd;box-shadow:1px 8px 10px 1px #9b9b9b;border-radius:5px;behavior:url(js/pie.htc); display:block; z-index:111111;}*/
			.tip{width:500px; height:500px; position:absolute;top:20%; left:30%;background:#fcfdfd;box-shadow:1px 8px 10px 1px #9b9b9b;border-radius:5px; display:block; z-index:111111;}
			.tip_title{ background:#7DECA5 center repeat-x; height:30px;border-radius:5px;}
			.tip_title span { color:black; line-height:30px; padding-left:15px; font-size:12px; float:left;}
			.tip_title a { float:right; width:20px; height:20px; color:#FFF;  display:block; cursor:pointer;}
			.tip_title a:hover{ color:#000; cursor:pointer;}
			.tip_info{width:308px;height:85px; margin:25px auto;}
			.tip_info span img{ float:left;}
			.tip_info p { font-size:12px; color:#000; font-weight:bold; line-height:26px; padding-top:15px;}
			.tip_button{ width:150px;margin: auto; }
			.tip_button button{ width:50px; height:30px; margin-left:10px; cursor:pointer;}
		</style>	
		<script type="text/javascript">
			$(document).ready(function() {
				$(".btn btn-warning").click(function() {
					$(".tip").fadeIn(200);
				});
		
				$(".tip_title a").click(function() {
					$(".tip").fadeOut(200);
				});
		
				$(".sure").click(function() {
					$(".tip").fadeOut(100);
				});
		
				$(".cancel").click(function() {
					$(".tip").fadeOut(100);
				});
		
			});
		</script>

	</head>
	<body style="background-color: #F5FDF9;" >
		<div style="width: 100%;text-align: center;">
			<!-- 第一行 -->
			 <div style="width:100%;margin-top: 5px;padding: 3px;">
				 <div style="float: left;margin-right: 10px;margin-bottom: 5px;"><button type="button" class="btn btn-danger" style="outline: none;">批量删除</button></div>
				 <div style="float: left;margin-right: 20px;"><button type="button" class="btn btn-warning" id="insert" style="outline: none;">增加药材</button></div>
				 <div style="float: left;line-height: 30px;margin-right: 5px;margin-left: 180px;">
					 <p style="float: left;">
						ID：
					</p>
					<input placeholder="请输入药材编号" type="text" style="border-radius: 10px;border-width: 1px;outline: none;"/>
				</div>
				<div style="float: left;line-height: 30px;margin-right: 5px;">
					 <p style="float: left;">
						名称：
					</p>
					<input placeholder="请输入药材名称" type="text" style="border-radius: 10px;border-width: 1px;outline: none;"/>
				</div>
				<div style="float: left;line-height: 30px;margin-right: 5px;">
					 <p style="float: left;">
						类别：
					</p>
					<input placeholder="请输入药材类别" type="text" style="border-radius: 10px;border-width: 1px;outline: none;"/>
				</div>
				<div style="float: left;">
					<button type="button" class="btn btn-info" style="outline: none;">查询</button>
				</div>
				
			</div>

			<!-- 表格信息-->
			<div>
				<table class="table table-bordered table-hover"
				data-pagination="true"
				data-side-pagination="client"
				data-page-size="1">
				    <thead>  
				        <tr class="success">
							<th style="background-color:#D1FDDE;text-align:center;border:none;"><input type="checkbox" id="checkAll" name="checkAll" /></th>
				            <th style="border: none;text-align: center;background-color: #D1FDDE;">药材编号</th>  
				            <th style="border: none;text-align: center;background-color: #D1FDDE;">药材名称</th>  
							<th style="border: none;text-align: center;background-color: #D1FDDE;">药材规格</th> 
				            <th style="border: none;text-align: center;background-color: #D1FDDE;">药材类别</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">药材单价</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">药材有效期</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">药材图片</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">药材描述</th>
				            <th style="border: none;text-align: center;background-color: #D1FDDE;">药材库存</th>
							<th style="border: none;text-align: center;background-color: #D1FDDE;">操作</th>
				        </tr>  
				    </thead>  
				    <tbody>  
				        <tr>
							<td style="text-align:center;"><input type="checkbox"  name="checkItem" /></td>
				            <td></td>  
				            <td></td>  
				            <td></td>  
				            <td></td>  
				            <td></td>
							<td></td> 
							<td></td> 
							<td></td> 
							<td></td>
							<td style="text-align:center;width: 150px;">
								<button type="button" class="btn btn-danger" style="float: left;margin-right: 5px;outline: none;">删除</button>
								<button type="button" class="btn btn-success"style="outline: none;">修改</button>
							</td>
						</tr>

						<tr>
							<td style="text-align:center;"><input type="checkbox"  name="checkItem" /></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td style="text-align:center;width: 150px;">
								<button type="button" class="btn btn-danger" style="float: left;margin-right: 5px;outline: none;">删除</button>
								<button type="button" class="btn btn-success"style="outline: none;">修改</button>
							</td>
						</tr>

						<tr>
							<td style="text-align:center;"><input type="checkbox" name="checkItem" /></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td style="text-align:center;width: 150px;">
								<button type="button" class="btn btn-danger" style="float: left;margin-right: 5px;outline: none;">删除</button>
								<button type="button" class="btn btn-success"style="outline: none;">修改</button>
							</td>
						</tr>

				    </tbody>  
				</table> 
			</div>

			<!-- 分页信息 -->
			<div class="panel-footer" style="text-align: center;background-color: #F5FDF9;border: none;margin-bottom: 30px;">
			    <nav>  
			        <ul class="pagination pagination-sm">  
			            <li class="disabled">  
			                <a href="#" aria-label="Previous">  
			                    <span aria-hidden="true">«</span>  
			                </a>  
			            </li>  
			            <li class="active"><a href="#">1</a></li>  
			            <li><a href="#">2</a></li>  
			            <li><a href="#">3</a></li>  
			            <li><a href="#">4</a></li>  
			            <li><a href="#">5</a></li>  
			            <li>  
			                <a href="#" aria-label="Next">  
			                    <span aria-hidden="true">»</span>  
			                </a>  
			            </li>  
			        </ul>  
			    </nav>  
			</div>

			<!-- 新增药品增弹出框 -->
			<div class="tip" id="tip1" style=" display:none;">
				<div class="tip_title">
					<img src="static/img/植物.png" style="float: left;width: 5%;" /><span>添加药材</span><a>x</a></div>
				<div class="tip_info">
							 <div class="input-group" style="margin-bottom: 10px;">
							     <span class="input-group-addon">药材名称</span>
							     <input type="text" class="form-control" placeholder="请输入药材名称">
							 </div>
						
							 <div class="input-group" style="margin-bottom: 10px;">
							     <span class="input-group-addon">药材规格</span>
							     <input type="text" class="form-control" placeholder="请输入药材规格">
							 </div>
				
							 <div class="input-group" style="margin-bottom: 10px;">
							     <span class="input-group-addon">药材类别</span>
							     <input type="text" class="form-control" placeholder="请输入药材类别">
							 </div>
						
							 <div class="input-group" style="margin-bottom: 10px;">
							     <span class="input-group-addon">药材单价</span>
							     <input type="text" class="form-control" placeholder="请输入药材单价">
							 </div>
							
							 <div class="input-group" style="margin-bottom: 10px;">
							     <span class="input-group-addon">药材库存</span>
							     <input type="text" class="form-control" placeholder="请输入药材库存">
							 </div>
							 <div class="input-group" style="margin-bottom: 10px;">
							     <span class="input-group-addon">图片地址</span>
							     <input type="text" class="form-control" placeholder="请输入图片地址">
							 </div>
							
							 <div class="input-group" style="margin-bottom: 10px;">
							     <span class="input-group-addon">药材有效期</span>
							     <input type="text" class="form-control" placeholder="请输入药材有效期">
							 </div>
							 <textarea name="reworkmes"   cols="40"   rows="4"   style="OVERFLOW:   hidden" placeholder="请输入药材描述"></textarea>
							
							<div class="tip_button" style="margin-top: 10px;">
								<button type="text" value="确定" name="sure" class="sure" style="background-color: yellow;border-radius: 5px;border: none;">添加</button>
								<button type="text" value="取消" name="cancel" class="cancel" style="background-color: skyblue;border-radius: 5px;border: none;">取消</button>
							</div>
						 </div>
				</div>

			<!--修改药品弹出框-->
			<div class="tip" id="tip2" style=" display:none;">
				<div class="tip_title">
					<img src="static/img/植物.png" style="float: left;width: 5%;" /><span>修改药品</span><a>x</a></div>
				<div class="tip_info">
					<div class="input-group" style="margin-bottom: 10px;">
						<span class="input-group-addon">药材名称</span>
						<input type="text" class="form-control" >
					</div>

					<div class="input-group" style="margin-bottom: 10px;">
						<span class="input-group-addon">药材规格</span>
						<input type="text" class="form-control">
					</div>

					<div class="input-group" style="margin-bottom: 10px;">
						<span class="input-group-addon">药材类别</span>
						<input type="text" class="form-control">
					</div>

					<div class="input-group" style="margin-bottom: 10px;">
						<span class="input-group-addon">药材单价</span>
						<input type="text" class="form-control" >
					</div>

					<div class="input-group" style="margin-bottom: 10px;">
						<span class="input-group-addon">药材库存</span>
						<input type="text" class="form-control">
					</div>
					<div class="input-group" style="margin-bottom: 10px;">
						<span class="input-group-addon">图片地址</span>
						<input type="text" class="form-control">
					</div>

					<div class="input-group" style="margin-bottom: 10px;">
						<span class="input-group-addon">药材有效期</span>
						<input type="text" class="form-control">
					</div>
					<textarea name="reworkmes"   cols="40"   rows="4"   style="OVERFLOW:   hidden" ></textarea>

					<div class="tip_button" style="margin-top: 10px;">
						<button type="text" value="确定" name="sure" class="sure" style="background-color: yellow;border-radius: 5px;border: none;">修改</button>
						<button type="text" value="取消" name="cancel" class="cancel" style="background-color: skyblue;border-radius: 5px;border: none;">取消</button>
					</div>
				</div>
			</div>

		</div>
	</div>

	<script>
		$(function(){
			function initTableCheckbox() {
				var $thr = $('table thead tr');
				var $checkAllTh=$('table thead th:first');


				/*全选或全不选事件*/
				var $checkAll = $thr.find('#checkAll');
				$checkAll.click(function(event){
					/*将所有行的选中状态设成全选框的选中状态*/
					$tbr.find('input').prop('checked',$(this).prop('checked'));
					/*并调整所有选中行的CSS样式*/
					if ($(this).prop('checked')) {
						$tbr.find('input').parent().parent().addClass('warning');
					} else{
						$tbr.find('input').parent().parent().removeClass('warning');
					}
					/*阻止向上冒泡，以防再次触发点击操作*/
					event.stopPropagation();
				});


				/*点击全选框所在单元格时也触发全选框的点击操作*/
				$checkAllTh.click(function(){
					$(this).find('input').click();
				});


				/*点击每一行的选中复选框时*/
				var $tbr=$('table tbody tr');
				$tbr.find('input').click(function(event){
					/*调整选中行的CSS样式*/
					$(this).parent().parent().toggleClass('warning');
					/*如果已经被选中行的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态*/
					$checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false);
					/*阻止向上冒泡，以防再次触发点击操作*/
					event.stopPropagation();
				});


				/*点击增加药品弹出框*/
				var $insert=$("#insert");
				var $tip=$("#tip1");
				$insert.click(function (e) {
					$tip.css("display","block");
				});

			}
			initTableCheckbox();
		});
	</script>
	</body>
</html>
